<template>
    <div>
        <!--logo设计：https://818ps.com/?route_id=16080877952042&route=1,&after_route=1-->
        <a-row>
            <a-col :span="3" :offset="1">
                <div>
                    <img style="width: 150px;height: 150px;margin-top: 30px"
                         src="http://120.27.212.10:9090/group1/M00/00/00/eBvUCl_ZdgmAGkv5AAJJ7HtejHk284.png">
                </div>
            </a-col>
            <div>
                <a-col :span="7" :offset="4">
                    <div style="vertical-align: center;">

                        <a-input-search class="inputSearch" size="large" v-model="key" @search="onSearch"
                                        @focus="suggestSearch"
                                        @change="e=>suggestSearch(e)"
                                        placeholder="关键字">
                            <a-button slot="enterButton" style="color: #dc5717">
                                搜索
                            </a-button>
                        </a-input-search>
                        <!--自动补全-->
                        <div v-if="suggestions.length>0" ref="su" class="suggestionDiv"
                             v-click-white="clearSuggestions">
                            <a-list :split="false" :data-source="suggestions"
                                    style="height: 100%;;font-size:14px;">
                                <a-list-item class="suggestion-item"
                                             slot="renderItem"
                                             slot-scope="suggest, index">
                                <span style="width: 100%;" @click="clickSuggestion(suggest)">
                                    {{suggest}}
                                </span>
                                </a-list-item>
                            </a-list>
                        </div>
                        <!--历史记录-->
                        <div v-if="historyList.length>0" ref="su" class="suggestionDiv"
                             v-click-white="clearSuggestions">

                            <a-list :split="false" :data-source="historyList"
                                    style="height: 150px;font-size:14px;overflow: scroll">
                                <span style="font-size: 13px;color: #868686;margin:5px 0px"> 历史记录</span>
                                <a-list-item class="suggestion-item"
                                             slot="renderItem"
                                             slot-scope="history, index">
                                <span style="width: 100%;color: #90b7e2" @click="clickSuggestion(history.key)">
                                    {{history.key}}
                                </span>
                                    <span style="float: right;"><a-button class="btn_delete_his"
                                                                          type="link"
                                                                          size="small"
                                                                          @click="deleteHistory(history.key)">删除</a-button></span>
                                </a-list-item>
                            </a-list>
                        </div>
                        <div style="margin-top: 20px;">
                            <a-tag style="color: #999" class="searchTag">年终进口日</a-tag>
                            <a-tag style="color: #999">爆款电视</a-tag>
                            <a-tag style="color: #999">手机优惠</a-tag>
                            <a-tag style="color: #999">新品上市</a-tag>
                            <a-tag style="color: #999">秒杀</a-tag>
                        </div>
                    </div>
                </a-col>

            </div>

            <a-col :span="4" :offset="2">
                <a-button icon="shopping-cart" size="large" class="shoppingCart" @click="toCart">购物车</a-button>
            </a-col>
        </a-row>

    </div>
</template>

<script>

    import SearchApi from "../../api/search/SearchApi";
    import searchHistoryApi from "../../api/info/searchHistoryApi";
    import Cookies from "js-cookie";

    export default {
        name: "LogoSearch",
        directives: {
            clickWhite: {
                bind(el, binding) {
                    function documentHandler(e) {
                        if (el.contains(e.target)) {
                            return false;
                        }
                        if (binding.expression) {
                            binding.value(e);
                        }
                    }

                    el.__vueClickOutside__ = documentHandler;
                    document.addEventListener('click', documentHandler);
                },
                unbind(el) {
                    document.removeEventListener('click', el.__vueClickOutside__);
                    delete el.__vueClickOutside__;
                }
            }
        },
        data() {
            return {
                themeColor: "#f66825",
                key: "",//搜索关键词
                suggestions: [],
                historyList: []
            }
        },
        methods: {

            /**
             * 搜索关键词
             */
            onSearch(value) {
                if (value && value.trim() !== "") {
                    //添加random参数 防止SearchApp页监听不到搜索同一个关键词时url的改变

                    this.$router.push("/search?key=" + value + "&k=" + new Date().getTime())
                }
            },
            /**
             * 搜索自动补全的词
             */
            suggestSearch(e) {
                let value = e.target.value
                if (value && value.trim() !== "") {

                    this.historyList = []
                    SearchApi.suggest(value).then(resp => {
                        if (resp.data.flag) {
                            this.suggestions = resp.data.data;
                        }
                    })
                } else {
                    //展示历史记录
                    const token = Cookies.get("user_token_web");
                    if (token){
                        searchHistoryApi.historyData().then(resp => {

                            this.suggestions = []
                            if (resp.data.flag) {
                                this.historyList = resp.data.data;
                            }
                        })
                    }


                }
            },
            /**
             * 清除建议列表
             */
            clearSuggestions() {
                this.suggestions = []
                this.historyList = []
            },
            /**
             * 选择建议词
             * @param value
             */
            clickSuggestion(value) {
                this.key = value;
                this.$router.push("/search?key=" + value + "&k=" + new Date().getTime())
                this.suggestions = []
            },
            deleteHistory(key) {
                console.l1og(key)
                searchHistoryApi.deleteHistory(key).then(resp => {
                    console.log("删除历史记录->", resp.data)
                    this.historyList = this.historyList.filter(item => item.key !== key)
                })
            },
            toCart(){
                this.$router.push("/cart_index")
            }
        }
    }
</script>

<style scoped>
    .ant-input-affix-wrapper .ant-input:focus {
        border: none;
        box-shadow: none;
    }


    . ant-input-search {
        border: none;
        border-bottom: 1px solid white !important;
        box-shadow: none;
    }

    .inputSearch {
        width: 400px;
        height: 50px;
        border-color: #f66825;
        margin-top: 60px;
    }

    ant-input-search ant-input :focus {
        border: none;
        box-shadow: none;

    }

    .inputSearch :hover {
        border-color: #ef601d;
    }

    .inputSearch :focus {
        border-color: #ef601d;
        mso-border-shadow: no;
        box-shadow: none;
    }

    .shoppingCart {
        color: #ef601d;
        margin-top: 60px;

    }

    .searchTag :hover {
        color: #ef601d;
    }

    .suggestion-item {
        font-size: 14px;
        margin: 0;
        height: 27px
    }

    .suggestionDiv {
        border: 1px solid #F4F4F4;
        padding: 3px;
        z-index: -1
    }

    .suggestion-item:hover {
        cursor: pointer;
        color: #ef601d;
        background: #FFDFC6;
    }

    .btn_delete_his {
        color: #929191;
        font-size: 13px;
    }

    .btn_delete_his :hover {
        color: #378BF1;
    }

</style>